
<html>
<#include file="/include.html" />
<body>
    <div id="app" style="margin-left: auto; margin-right: auto; margin-top: 100px; width: 350px;">
        <h1>{{title}}</h1>
        <el-form class="apply-form first-form" :model="formData" :rules="rules" ref="form">
            <div>
                <table style="width: 100%;">
                    <tr>
                        <td style="width: 60px;font-family:Helvetica Neue;">用户名</td>
                        <td>                            
                            <el-input v-model="formData.username" clearable></el-input>                            
                        </td> 
                        <td style="width: 80px;">
                            <el-form-item style="height:1px;" prop="username"></el-form-item>
                        </td>                       
                    </tr>
                    <tr>
                        <td>密码</td>
                        <td>
                            <el-input v-model="formData.pwd" show-password></el-input>
                        </td>
                        <td style="width: 80px;" ><el-form-item  prop="pwd"></el-form-item></td>
                    </tr>
                   
                    <tr>
                        <td></td>
                        <td style="text-align: right;">
                               <el-button @click="submit()" icon="el-icon-search">登录</el-button>
                        </td>
                    </tr>
                </table>
            </div>
            <div style="text-align: center;">
                username:admin   pwd:admin
            </div>
        </el-form>
    </div>
</body>

<script>
    new Vue({
        el: '#app',
        created() {
            document.title=this.title1,
            this.showdata();
        },
        data: {
            title: "",
            title1:"ok",
            visible: false,
            formData: {
                username: "",
                pwd: "",
            },
            
            rules: {
               
                username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    pwd: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                
            }

        },

        methods: {
            submit: function () {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
          
                        this.$http.post('/check', this.formData).then(function (res) {

                            if (res.body.code == 0) {
                                window.location = "/main";
                            } else {
                                this.$message({ type: 'error', message: res.body.message });
                            }
                        }, function () {
                            this.$message({ type: 'error', message: res.body.message });
                        });
                    }else{
                        return false;
                    }
                })
            },
            showdata: function () {
                //发送get请求
                this.$http.get('/data').then(function (res) {
                    this.title = res.body.title;
                }, function () {
                    console.log('请求失败处理');
                });
            },
            login: function () {
                if (this.username == "") {
                    this.$message({ type: 'error', message: "请输入用户名" });
                    return;
                }
                if (this.pwd == "") {
                    this.$message({ type: 'error', message: "请输入密码" });
                    return;
                }
                this.$http.post('/check', { username: this.username, pwd: this.pwd }).then(function (res) {

                    if (res.body.code == 0) {
                        window.location = "/main";
                    } else {
                        this.$message({ type: 'error', message: res.body.message });
                    }
                }, function () {
                    this.$message({ type: 'error', message: res.body.message });
                });

            },
            alert: function (msg) {
                this.$alert(msg, '提示', {
                    confirmButtonText: '确定',
                    callback: action => {

                    }
                });

            }

        }
    })
</script>

</html>